<template>
	<view  class="pay">
		<view class="mon same">
		 <text class="ey">充值金额</text>
		  <up-input
		     placeholder="请输入充值金额"
		     border="surround"
		     v-model="payvalue"
		   ></up-input>	
		</view>
		
		<view class="paytype same">
			<text class="ey same">支付类型</text>
			<u-radio-group 
			    v-model="typevalue"
			    placement="row">
			<u-radio 
				:customStyle="{marginBottom: '8px'}"
				      v-for="(item, index) in radiolist"
				      :key="index"
				      :label="item.name"
				      :name="item.name"
				></u-radio>
			</u-radio-group>
			
		</view>
		
		<view class="same">
			<up-button type="primary" text="立即充值" @click="getcharge"></up-button>
		</view>
		
		<view class="payd" >
			<view class="payd_item same" v-for="item in paylist" :key='item.id'>
				<text>{{item.payType}}</text>
				<text>充值 {{item.money}} 元</text>
				<text>{{item.time}}</text>
			</view>
		</view>
		
		
	</view>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue';
import {gorecharge,gotopay} from '../../../api/parkApi.js'
import {payyy} from '@/mock/park.js'
	
const payvalue =ref() //支付金额
const typevalue=ref() //选择类型
const paylist =ref([]) //充值列表

const radiolist=reactive([
	{
		name: '电子支付',
		disabled: false,

	},
	{
		name: '微信',
		disabled: false,
	
	},
	{
		name: '支付宝',
		disabled: false,
	
	},
	
])

//充值记录
const gethisto=async()=>{
	let res =await gorecharge({
		header:{
			"Authorization":uni.getStorageSync('token')
		}
	})
	if(res.code==200){
		
	}else{
		//模拟数据
		paylist.value=payyy()
	}
	console.log(paylist.value);
	
}

//充值
const getcharge =async()=>{
	console.log(Number(payvalue.value));
	let num =parseInt(payvalue.value)
	let res = await gotopay({
		data:{
			money:num,
			payType:typevalue.value
		}

	})
	if(res.code==200){
		uni.showToast({
			title:"充值成功"
		})
		
	}else{
		//模拟数据
		
		let last ={
			id:payyy()[payyy().length-1].id+1,
			money:payvalue.value,
			payType:typevalue.value,
			time:newTime()
		}
		paylist.value.push(last)
		
		
		uni.showToast({
			title:"充值成功"
		})
		
		
	}
	console.log(paylist.value);


}

//时间
const newTime=()=>{
 let date= new Date()
 let year=date.getFullYear()
 let mon=date.getMonth()+1
 let day =date.getDate()
 let hou=date.getHours()
 let min=date.getHours()
 let str= '-'
 return year+str+mon+str+day+' '+hou+':'+min
	
}

onMounted(()=>{
	gethisto()
		
})
</script>

<style lang="scss">
.pay{
	height: 100%;
	padding: 5px 10px;
	// background-color: rgb(211, 227, 253);
	.mon{
		display: flex;
		align-items: center;

	}
	.ey{
		font-size: 16px;
		font-weight: 700;
		margin-right: 10px;
	}
	.same{
		margin: 10px 0px;
	}
	::v-deep .u-radio-group{
		display: flex;
		justify-content: space-around;
		margin: 10px 0px;
	}
	.payd{
		
	.payd_item{
		
		
		text{
			margin-right: 4px;
		}
		
	}
		
	}
	
	
	
}
</style>
